<template>
	<view class="container">
		<view class="more" v-if="this.list.length==0">没有更多消息</view>
		<view v-else v-for="item in currentList" :key="item.activeId">
			<uni-card :title="item.activeTitle" :sub-title="item.teamName" :extra="item.address" :thumbnail="item.photo"
				@click="handleOneActive(item.activeId)">
				<text class="uni-body">
					<view class="example-body">
						时间：
						<uni-dateformat class="dateblock" :date="item.startTime" format="MM/dd hh:mm"></uni-dateformat>
						~
						<uni-dateformat class="dateblock" :date="item.endTime" format="MM/dd hh:mm"></uni-dateformat>
					</view>
				</text>
			</uni-card>
		</view>
		<uni-section v-if="currentList.length!=0" style="background-color: white;" title="" padding class="zzq">
			<uni-pagination :current="current" :total="total" :pageSize="pageSize" @change="change" />
		</uni-section>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			},
			flag: {
				type: String
			},
		},
		name: "createActive-list",
		data() {
			return {
				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				currentList: [],
				current: 1,
				total: 0,
				pageSize: 4
			};
		},
		watch: {
			list() {
				this.total = this.list.length
				this.setData()
			}
		},
		methods: {
			change(e) {
				this.current = e.current
				this.setData()
			},
			setData() {
				console.log('11111')
				console.log(this.list)
				this.currentList = []
				for (var i = (this.current - 1) * this.pageSize; i < this.current * this.pageSize; i++) {
					if (this.list[i] != null) {
						this.currentList.push(this.list[i])
					}
				}
			},
			handleOneActive(id) {
				console.log("点击了单个活动");
				this.$tab.navigateTo('/pages/work/ActiveDetails/ActiveDetails?id=' + id)
			},
		}
	}
</script>

<style lang="scss">
	.example-body {
		line-height: 1.5em;
		color: #afab9f;
	}

	.more {
		width: 90%;
		height: 50px;
		line-height: 50px;
		color: #000000;
		text-align: center;
		font-size: 12px;
	}

	.zzq {
		width: 92%;
		margin-left: 15px;
	}
</style>
